<div class="gadiend-white sOpt hidden">
    <div class="gadiend-white mb4" style="height: 28px;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc">
        <div class="lh28 pl12 pr">
            Settings
            <span class="pl8 pr12 fr close hover50 apply-filter" 
                  onclick="filter.Hide()" title="Close Settings">&nbsp;</span>
        </div>
    </div>
    <div class="grid_x ml4 mb4">
        <div class="grid_6" >
            <div class="displaySetings  " style="border: 1px solid #ccc">
                <div class="lh20 fwb pl12 mb4 gadiend-white" style="border-bottom: 1px solid #ccc;">Display Setting</div>
                <div style="height: 120px">
                    <div class="grid_x pb4 ml4 radio {{if $data_display==1}}cked{{/if}}" value="1">
                        <div class="grid_x w14px mr12 ic" style="height: 14px;"></div>
                        <div class="grid_5 lh16 label">Show all record</div>
                    </div>
                    <div class="grid_x pb4 ml4 radio {{if $data_display==0}}cked{{/if}}" value="0">
                        <div class="grid_x w14px mr12 ic " style="height: 14px;"></div>
                        <div class="grid_5 lh16 label">Hide deleted record</div>
                    </div>
                    <div class="grid_x pb4 ml4 radio {{if $data_display==-1}}cked{{/if}}" value="-1">
                        <div class="grid_x w14px mr12 ic" style="height: 14px;"></div>
                        <div class="grid_5 lh16 label">Only show deleted record</div>
                    </div>
                    <div class="clear"></div>
                    <div class="pr ml-1 mr-1" style="height: 4px;border-top: 1px solid #ccc;background: #FAFAFA;"></div>
                    <div class="lh20 fwb pl12 gadiend-white" style="border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;">Filter Data</div>
                    <div class="pt4 pb4 pl4 pr4 pr filter-control s-p-e">
                        <div class="pr" style="border: 1px solid #ccc;height: 23px;line-height: 22px">
                            <div class="pa t0 l0 r0 " style="line-height: 22px">
                                <span class="pr8 pl16 ml4 filter enable open-filter-box" onclick="filter.Toggle()">Filter by {{if isset($filterby)}}{{$filterby}}{{else}}Unknown{{/if}}</span>
                                <span class="pl8 pr8 fr close hover50 apply-filter" onclick="filter.Clear()" title="Clear Filter">&nbsp;</span>
                                <div class="pa t24 l0 r0  mt-1 hidden filter-box c-w-c-b" style="z-index: 1">
                                    <div class="gadiend-classic" style="border: 1px solid #ccc;max-height: 120px;overflow-x: auto">
                                        <div class="pt4" style="">
                                            <div class="grid_x pb8 ml4 checkbox cked filter-all" 
                                                 onclick="filter.FA()" 
                                                 value="" col="all">
                                                <div class="grid_x w16px mr4 ic" style="height: 16px;"></div>
                                                <div class="grid_4 lh16 label">All</div>
                                            </div>
                                            <span class="filter-values">
                                            {{if isset($filterModel)}}
                                            {{foreach $filterModel as $f}}
                                            <div onclick="filter.FMe(this)" 
                                                 class="grid_x pb4 ml4 checkbox filter-item {{if isset($filterdefault) and is_array($filterdefault)}}{{if in_array($f["value"],$filterdefault)}}cked{{/if}}{{else}}cked{{/if}}" 
                                                 val="{{$f["value"]}}" 
                                                 col="{{$f["value"]}}">
                                                <div class="grid_x w16px mr4 ic" style="height: 16px;"></div>
                                                <div class="grid_4 lh16 label">{{$f["display"]|truncate:36:"..."}}</div>
                                            </div>
                                            {{/foreach}}
                                            {{else}}
                                                
                                            {{/if}}
                                            </span>
                                            <div class="clear"></div>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid_14" >
            <div class="columnsSetings ml4 " style="border: 1px solid #ccc">
                <div class="lh20 fwb pl12 gadiend-white" style="border-bottom: 1px solid #ccc;">Columns setting</div>
                <div class="pt4" style="height: 120px;overflow-x: auto">
                    {{if isset($colModel)}}
                    {{for $col=0 to count($colModel)-1}}
                    <div class="grid_x pb4 ml4 checkbox {{if !$colModel[$col]["hide"]}}cked{{/if}}" 
                         value="{{$col}}" 
                         col="{{$colModel[$col]["name"]}}">
                        <div class="grid_x w16px mr4 ic" style="height: 16px;"></div>
                        <div class="grid_4 lh16 label">{{$colModel[$col]["display"]|truncate:36:"..."}}</div>
                    </div>
                    {{/for}}
                    {{else}}
                        No colums data to display.
                    {{/if}}
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
<!--        <div class="">
            <div class="columnsSetings mt4 " style="border: 1px solid #ccc">
                <div class="lh20 fwb pl12 gadiend-white" style="border-bottom: 1px solid #ccc;">Bọ lọc dữ liệu</div>
                <div class="pt4" style="height: 120px;overflow-x: auto">
                </div>
            </div>
        </div>-->
    </div>
    <div class="clear"></div>
    <script type="text/javascript">
        var filter=(function () {
            var filterbox=$(".filter-box");
            var filterall=$(".filter-all");
            var filter=$(".filter");
            return {
                Init:function(){
                    if($("#frmFlexiGrid .flexigrid .sSet").length==0){
                        $("#frmFlexiGrid .flexigrid .mDiv .ptogtitle").after("<div class='sSet'></div>");
                        $(".sOpt").appendTo($("#frmFlexiGrid .flexigrid .sSet"));
                    }
                    $("#frmFlexiGrid .flexigrid .sSet .sOpt").toggle();
                },
                Toggle:function(){
                    filterbox.toggle();
                },
                FMe:function(o){
                    $(o).toggleClass("cked");
                    if($(".filter-item:not(.cked)").length>0){
                        $(filterall).removeClass("cked");
                        filter.addClass("enable");
                        var FilterValues=$(".filter-item.cked").map(function(){
                            return $(this).attr("val");
                        });
                        if(FilterValues.length>0){
                            var _filters=new Array();
                            for(var i=0;i<FilterValues.length;i++){
                                _filters[i]=FilterValues[i];
                            }
                            FlexiGrid.Filter("me",_filters);
                        }else FlexiGrid.Filter("none",[]);
                    }else{
                        $(filterall).addClass("cked");
                        filter.removeClass("enable");
                        FlexiGrid.Filter("all",[]);
                    }
                },
                FA:function(){
                    filter.removeClass("enable");
                    if ($(filterall).hasClass('cked')) {
                        $(".filter-item.cked").removeClass("cked");
                        filterall.removeClass("cked");
                        FlexiGrid.Filter("none",[]);
                    }else{
                        $(".filter-item:not(.cked)").addClass("cked");
                        filterall.addClass("cked");
                        FlexiGrid.Filter("all",[]);
                    }
                },
                Clear:function(){
                    $(".filter-item:not(.cked)").addClass("cked");
                    filterall.addClass("cked");
                    FlexiGrid.Filter("all",[]);
                    filterbox.hide();
                },
                Hide:function(){
                    $("#frmFlexiGrid .flexigrid .sSet .sOpt").toggle();
                },
                HideFilter:function(){
                    filterbox.hide();
                }
            };
        }());
    </script>
</div>